import './Counter.css'
import {useCounterStoreContext} from '../../store'
import { observer} from 'mobx-react'
export const Counter = observer(() => {
    const {
        count,
        price, 
        total,
        addCount, 
        autoAdd, 
        delayAdd,
        onChangePrice,
        onChangePriceTotal
    } = useCounterStoreContext()
    return (
        <div className="container">
            <div className='title'>This is Counter component</div>
            <div>count: {count}</div>
            <label htmlFor="price">price:</label> <input type="number" id='price' onChange={onChangePrice} value={price}/><br />
            <label htmlFor="total">total:</label> <input type="number" id='total' onChange={onChangePriceTotal} value={total}/>

            <div>
                <button onClick = {addCount}>Add +1</button>
                <button onClick = {autoAdd}>Auto Add!</button>
                <button onClick = {delayAdd}>Delay Add!</button>
            </div>
            
        </div>
    )
})